<!-- 
  @name: 登录提示操作
  @date: 2020.2.14
 -->
<template>
	<view>
		<!-- 全局消息盒子 -->
		<msg-box></msg-box>
		<view class="sign-in" v-show="showLogin">
			<view class="_popup center">
				<view class="__info">
					<view class="__msg">
						<text v-if="!hasToken">您尚未登录</text>
						<text v-else>您的登录状态已失效</text>
					</view>
					<view class="__msg2">
						<text v-if="!hasToken">（请点击按钮进行登录）</text>
						<text v-else>（请点击按钮重新登录）</text>
					</view>
					<view class="btn_view_popup">
						<view class="_cancle" @tap="cancleSign">取消</view>
						<button v-if="canIUseGetUserProfile" class="_submit" @tap="onGetUserInfo">
							登录
						</button>
						<button
							v-else
							class="_submit"
							open-type="getUserInfo"
							@getuserinfo="onGetUserInfo"
						>
							登录
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import msgBox from '@/components/msg-box/msg-box.vue';

export default {
	components: { msgBox },
	props: {
		//是否在外部触发授权，在本组件内进行之后的操作
		startLogin: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			canIUseGetUserProfile: false
		};
	},
	computed: {
		hasToken() {
			return this.$store.state.hasToken;
		},
		//是否显示登录弹窗
		showLogin() {
			return this.$store.state.showLogin;
		}
	},
	watch: {
		startLogin(val) {
			if (val) this.getCode();
		}
	},
	created() {
		if (wx.getUserProfile) {
			this.canIUseGetUserProfile = true;
		}
		this.getCode();
	},
	methods: {
		//取消登录
		cancleSign() {
			this.$store.commit('showLogin', false);
		},
		//登录，确定授权
		async onGetUserInfo(e) {
			console.log(e);
			if (this.canIUseGetUserProfile) {
				var res = await this.getUserInfo();
				var { avatarUrl, gender, nickName } = res.userInfo;
			} else {
				var { avatarUrl, gender, nickName } = e.detail.userInfo;
			}
			this.submitLogin(this.code, avatarUrl, gender, nickName);
			this.$store.commit('showLogin', false);
		},
		//登录，获取code
		getCode() {
			uni.login({
				provider: 'weixin',
				success: rs => {
					this.code = rs.code;
				},
				fail: err => {
					uni.hideLoading();
					this.$showToast('提交失败，请重试');
				}
			});
		},
		//登录，传递参数，获得用户信息
		submitLogin(code, avatarUrl = '', gender = '', nickName = '') {
			uni.showLoading({
				mask: true,
				title: '登录中...'
			});
			this.$http({
				url: this.$api.userUrl + 'weixinlogin',
				data: {
					code,
					avatarUrl,
					gender,
					nickName
				},
				loading: 0 //上面有loading，所以在此处不显示
			})
				.then(res => {
					this.$store.commit('login', res); //保存token，将登录状态调整为“已登录”
					this.$socket.dispatch('check'); //通过检查websocket来重新连接
					this.$successToast('登录成功');
					
					//登录成功后刷新页面相关操作
					setTimeout(() => {
						this.$emit('submit');
						uni.$emit('loginSuc');
					}, this.$tmp.TIME_SUC);
				})
				.finally(this.getCode);
		},
		getUserInfo() {
			return new Promise((resolve, reject) => {
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: res => {
						console.log(res);
						resolve(res);
					},
					fail: err => {
						console.log(err);
						reject();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
._popup {
	z-index: 999999999;
}
.sign-in {
	.__info {
		width: 600rpx;
		padding-top: 50rpx;
		background-color: $color-white;
		border-radius: $border-radius-lg;
		text-align: center;
		.__msg {
			width: 100%;
			font-size: 34rpx;
		}
		.__msg2 {
			width: 100%;
			margin-top: 20rpx;
			color: $color-grey;
		}
		.btn_view_popup {
			margin-top: 50rpx;
			._submit {
				background-color: $color-white;
				border-bottom-right-radius: $border-radius-lg;
			}
		}
	}
}
</style>
